<template>
	<view class="main">
		<view class="header">
			<text>关注数量</text>
			<text>共{{total}}位</text>
		</view>
		<view class="content">
			<view class="item" @click="ToPage(item.id)" v-for="item in list" :key="item.id">
				<view class="avatar">
					<image :src="item.ico" mode=""></image>
					<view class="ico"></view>
				</view>
				<view class="info">
					<view class="title">
						<view class="name">{{item.nickname}}</view>
						<!-- <text class="icon"></text>
						<text>{{item.level||0}}</text> -->
					</view>
					<view class="des">{{item.introduce||'暂无'}}</view>
				</view>
			</view>
			
		</view>
		<view class="loadmore">
			<u-loadmore :status="status" />
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				pageNum:1,//当前页码
				pageSize:10,//每页数量
				total:0,//数据总量
				list:[],//电影列表
				status: 'loadmore',
				uid:'',
			}
		},
		onLoad(e) {
			this.uid = e.uid
		},
		onShow() {
			this.list=[]
			this.pageNum=1
		    this.getList()
		},
		onPullDownRefresh() {
			this.list=[]
			this.pageNum=1
		    this.getList()
		},
		onReachBottom(){
			if(Math.ceil(this.total/this.pageSize)>this.pageNum){
				this.pageNum = this.pageNum+1
				this.getList()
			}else{
				
			}
		},
		methods: {
			ToPage(id){
				uni.navigateTo({
				    url: `/pages/userInfo/index?id=${id}&userId=${id}`
				});
			},
			// 获取电影列表
			getList(){
				this.status = 'loading'
				this.$http({
					url:this.$api.getMvFollowList,
					method:'GET',
					hideLoading:true,
					data:{
						pageNum:this.pageNum,
						pageSize:this.pageSize,
						uid:this.uid,
						type:1,
					},
					success:res=>{
						console.log(res)
						this.total = Number(res.ext)
						if(Math.ceil(this.total/this.pageSize)<=this.pageNum){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
						
						this.list = this.list.concat(res.data)
						console.log(this.list)
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							this.status = 'nomore'
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.main {
		.header{
			padding: 32rpx 30rpx 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
		}
		.content{
			.item{
				padding: 40rpx 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #eeeeee;
				.avatar{
					width: 110rpx;
					height: 110rpx;
					position: relative;
					image{
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
					}
					.ico{
						border-radius: 50%;
						padding: 15rpx;
						background: #ffffff url(../../static/icon/man.png)center center no-repeat;
						background-size: 18rpx;
						position: absolute;
						right: 5rpx;
						bottom: 5rpx;
					}
				}
				.info{
					margin-left: 16rpx;
					width: calc(100% - 130rpx);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						.name{
							font-size: 32rpx;
							font-weight: 600;
							color: #000000;
							line-height: 44rpx;
							letter-spacing: 1rpx;
						}
						.icon{
							width: 28rpx;
							height: 28rpx;
							background: #ffffff url(../../static/icon/member.png)center center no-repeat;
							background-size: 28rpx 26rpx;
							padding: 15rpx;
							border-radius: 50%;
							margin: 0 10rpx 0 0rpx;
						}
						text{
							font-size: 20rpx;
							font-weight: 400;
							color: #2A303C;
							line-height: 28rpx;
						}
					}
					.des{
						width: 386rpx;
						margin-top: 20rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #999999;
						line-height: 28rpx;
					}
				}
			}
		}
		.loadmore{
			margin: 30rpx auto;
		}
	}
</style>
